<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Access-Control-Allow-Origin" content="*" />
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

<title>任务提醒系统</title>
<link rel="stylesheet" href="../static/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css"	href="../static/css/bootstrap-datetimepicker.min.css">


<script src="../static/js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>





<style type="text/css">
   table { table-layout: fixed;}
   .textclass{
   	    overflow:hidden;
	    white-space:nowrap;
	    text-overflow:ellipsis;
	    -o-text-overflow:ellipsis;
	    -moz-text-overflow: ellipsis;
	    -webkit-text-overflow: ellipsis;
   }
   tr{
   	cursor:pointer;
   }
  
</style>
  
</head>
<body>

  <div class="panel panel-default">
	  <!-- Default panel contents -->
	  <div class="panel-heading" >
	  	     <h1 class="modal-title">【任务提醒系统】</h1>  
	  	     <div id="nowtime"></div>
	  	     <button type="button" class="btn btn-info"   onclick="addTask()"  data-loading-text="Saving...">添加</button>
        
	  </div>

	  <!-- Table -->
	  <table class="table">
	        <thead>
	          <tr>
	            <th>任务内容</th>
	            <th>提醒时间</th>
	            <th>提醒邮箱</th>
	            <th>创建时间</th>
	          </tr>
	        </thead>

	        <tbody  id="textlist"  data-json="textlist">
	         <!-- <tr>
	            <th scope="row">1</th>
	            <td>Mark</td>
	            <td>Otto</td>
	            <td>@mdo</td>
	          </tr>
	          <tr>
	            <th scope="row">2</th>
	            <td>Jacob</td>
	            <td>Thornton</td>
	            <td>@fat</td>
	          </tr> -->
	         
	        </tbody>
	   </table>
</div>


<!--添加任务模态框-->
<div class="modal fade user-select" id="addTaskModal" tabindex="-1" role="dialog" aria-labelledby="loginModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <form >
        <div class="modal-header">
          <h4 class="modal-title" id="loginModalLabel">添加任务</h4>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        </div>
        <div class="modal-body">
            <div class="form-group">
				<label for="exampleInputEmail1">提醒内容</label>
				<textarea class="form-control" rows="3"  name="text" id="text"    placeholder="提醒内容"></textarea>
			</div>
			<div class="form-group">
				<label for="exampleFormControlSelect1">提醒时间</label>
				<div class="controls input-append date form_datetime" >
                     <input size="16" type="text" value=""  class="form-control"  name="time" id="time"   placeholder="选择提醒时间"  readonly>
                     <span class="add-on"><i class="icon-remove"></i></span>
                     <span class="add-on"><i class="icon-th"></i></span>
                 </div>
	         
			</div>
			<div class="form-group">
				<label for="exampleInputPassword1">提醒接收邮箱</label>
				<input type="text" class="form-control" name="email" id="email" placeholder="提醒接收邮箱">
			</div>
			
			
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
          <button type="button"  onclick="insertTask()" class="btn btn-primary">添加</button>
        </div>
      </form>
    </div>
  </div>
</div>
<!--查看任务模态框-->

<div class="modal fade user-select" id="findTaskModal" tabindex="-1" role="dialog" aria-labelledby="findTaskModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <form >
        <div class="modal-header">
          <h4 class="modal-title" id="loginModalLabel">当前任务</h4>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        </div>
        <input  type="hidden" id="findid" name="findid"  value="">
        <div class="modal-body">
            <div class="form-group">
				<label for="exampleInputEmail1">提醒内容</label>
				<textarea class="form-control" rows="3"  name="text" id="findtext"    placeholder="提醒内容"></textarea>
			</div>
			<div class="form-group">
				<label for="exampleFormControlSelect1">提醒时间</label>
				<div class="controls input-append date form_datetime" >
                     <input size="16" type="text" value=""  class="form-control"  name="time" id="findtime"   placeholder="选择提醒时间"  readonly>
                     <span class="add-on"><i class="icon-remove"></i></span>
                     <span class="add-on"><i class="icon-th"></i></span>
                 </div>
	         
			</div>
			<div class="form-group">
				<label for="exampleInputPassword1">提醒接收邮箱</label>
				<input type="text" class="form-control" name="email" id="findemail" placeholder="提醒接收邮箱">
			</div>
		
			
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">返回</button>
          <button type="button"  onclick="deleteTask()" class="btn btn-primary">删除</button>
        </div>
      </form>
    </div>
  </div>
</div>

<script src="../static/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="../static/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="../static/js/bootstrap-datetimepicker.fr.js"></script>
<script type="text/javascript" src="../static/js/bootstrap-datetimepicker.zh-CN.js"></script>
<script type="text/javascript">
    //选择时间器
    $(".form_datetime").datetimepicker({
        language : 'zh-CN',
    	format: 'yyyy-mm-dd hh:ii:ss',
    	weekStart: 1,
        todayBtn:  1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        forceParse: 0,
        showMeridian: 1
    });
		
	//添加任务模式框
	function addTask(){
		$("#addTaskModal").modal();
		
	}
	//添加数据库
	function insertTask(){

		 //获取输入框内容
		var text=document.getElementById('text').value;
		
		var time=document.getElementById('time').value;
		
		var email=document.getElementById('email').value;
		
         //验证表单正确性
         if(text.length<1){
         	alert("内容不为空！");
         	return;
         }else if(time<1){
         	alert("请选择时间");
         	return;
         }else if(email.indexOf("@") == -1){
         	alert("请输入正确的邮箱");
         	return;
         }
         //提交表单
		 $.ajax({
		        async:false,
		        type : "get",
		        url: "/addTask?text="+text+"&time="+time+"&email="+email,
		        dataType:'json',
		        success: function(data){
		        	    if(data=="ok"){
		        	    	alert("添加成功！");	
		        	    }else{
		        	    	alert("添加失败！");	
		        	    }
		        	    location.reload();
		        }
		});
	}
    //删除任务
    function deleteTask(){

    	var msg = "您真的确定要删除吗？\n\n请确认！"; 
    	if (confirm(msg)==true){ 
    		
    		//获取输入框内容
			var findid=document.getElementById('findid').value;
			$.ajax({
		        async:false,
		        type : "get",
		        url: "  /deleteTask?id="+findid,
		        dataType:'json',
		        success: function(data){
                       alert("删除成功！");	
		        }
		    });
		    location.reload();
    		return true; 
    	}else{ 
    		
    		   return false; 
    	} 


    	
	}

    

	//查看任务
    function findTask(id){
    	console.log("id="+id);
        var list=[];
        $("#findid").val(id);
    	$('#'+id).each(function(index,ele){
    		$(this).find('th').each(function(index,ele){
			    console.log($(ele).html());

                
			    $("#findtext").val($(ele).html());
		    });
		    

			$(this).find('td').each(function(index,ele){
			    console.log($(ele).html());
			    list.push($(ele).html());
		    });
	    });
           
	     console.log(list);
         $("#findtime").val(list[0]);
    	 $("#findemail").val(list[1]);
	    //打开模型框
	     $("#findTaskModal").modal();
	}


    
     
  
</script>
<script type="text/javascript">
        //页面加载调用
        //window.onload=function(){
        //查看任务
		$.ajax({
	        async:false,
	        type : "get",
	        url: "/find",
	        dataType:'json',
	        success: function(data){
	        	
	            var dom ='';
	        	for(i=0;i<data.length;i++){
                    //
	        		dom +='<tr  onclick=\'findTask("'+data[i]['id']+'")\'  id="'+data[i]['id']+'"> ';
			        dom +='   <th scope="row"  class="textclass">'+data[i]['text']+'</th>';
			        dom +='    <td>'+data[i]['time']+'</td>';
			        dom +='    <td>'+data[i]['email']+'</td>';
			        dom +='    <td>'+data[i]['createtime']+'</td>';
			        dom +='  </tr>';

                 }
                 $('[data-json="textlist"]').html(dom);   
	        }
	
	    });
	    //每1秒刷新时间
        setInterval("NowTime()",1000);
	    function NowTime(){
	        var myDate=new Date();
	        var y = myDate.getFullYear();
	        var M = myDate.getMonth()+1;     //获取当前月份(0-11,0代表1月)
	        var d = myDate.getDate();        //获取当前日(1-31)
	        var h = myDate.getHours();       //获取当前小时数(0-23)
	        var m = myDate.getMinutes();     //获取当前分钟数(0-59)
	        var s = myDate.getSeconds();     //获取当前秒数(0-59)
	        
	        //检查是否小于10
	        M=check(M);
	        d=check(d);
	        h=check(h);
	        m=check(m);
	        s=check(s);
	        var timestr = y+"-"+M+"-"+d+" "+h+":"+m+":"+s;
	        // if(s==59){
	        // 	console.log(timestr);
	        // }
	        document.getElementById("nowtime").innerHTML="当前时间：" + timestr;
        }
        //时间数字小于10，则在之前加个“0”补位。
        function check(i){
            var num = (i<10)?("0"+i) : i;
            return num;
        }
     //   }
</script>

</body>
</html>